<template>
	<view class="member">
		<u-dropdown @open="hideBorder = true" @close="hideBorder = false" ref="uDropdown" menu-icon="arrow-down-fill" :menu-icon-size="10" :border-bottom="false" active-color="#488EF5">
			<u-dropdown-item :title="titleTime" class="u-drawer-member">
				<view class="slot-content">
					<view class="u-flex u-p-t-20 u-p-l-30 u-p-r-30" style="background:#fff;height: 120rpx;border-bottom:1px solid #eee;justify-content: space-around;">
						<u-button throttle-time="0" hover-class="activeBtn" :hair-line="false" :class="{'activeBtn': timeIndex === i}" class="custom-style" v-for="(v,i) in timeList" :key="i" @click="setType(v,i,'timeType')">{{v.name}}</u-button>
					</view>
					<!-- <view style="background:#fff;" class="u-p-t-20 u-p-l-40 u-p-r-30 u-p-b-30">
						<u-row>
							<u-col span="4">
								<span style="color:#333333" class="u-font-13">自定义日期</span>
							</u-col>
							<u-col span="8" align="right">
								<u-form-item label="" :border-bottom="false" label-position="left" label-width="150">
									<u-input disabled-keyboard style="border-radius:20px;padding-left:20px;" v-model="time" border type="time" placeholder="年/月/日" @click="showTime" />
									<u-icon name="clock" style="position:relative;left:-30px;color:#ccc" size="35"></u-icon>
								</u-form-item>
							</u-col>
						</u-row>
					</view> -->
					<view style="border-top:1px solid #eee;"></view>
					<u-button plain :hair-line="false" style="border:none;border-radius:0 0 12px 12px;color:#488EF5" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
			<u-dropdown-item :title="energyName" class="u-drawer-member">
				<view class="slot-content">
					<view class="u-flex u-p-t-20 u-p-l-30 u-p-r-30" style="background:#fff;height: 120rpx;border-bottom:1px solid #eee;">
						<u-button throttle-time="0" hover-class="activeBtn" :hair-line="false" :class="{'activeBtn': energyIndex === i}" class="custom-style" v-for="(v,i) in energyList" :key="i" @click="setType(v,i,'energyType')">{{v.name}}</u-button>
					</view>
					<view style="border-top:1px solid #eee;"></view>
					<u-button plain :hair-line="false" style="border:none;border-radius:0 0 12px 12px;color:#488EF5" @click="closeDropdown">确定</u-button>
				</view>
			</u-dropdown-item>
		</u-dropdown>
		<u-picker v-model="timeShow" mode="time" @confirm="confirmTime" :params="timeParams"></u-picker>
		<view class="content">
			<view class="box">
				<scroll-view scroll-y style="height: 100vh;width: 100%;" @scrolltolower="reachBottom">
					<u-row class="row" v-for="(item,index) in resultList" :key="index">
						<u-col span="2" text-align="center">
							<u-image v-if="index ===0" style="margin: 0 auto;" src="/static/img/loveforest/number_one.png" width="40" height="40" mode="aspectFit"></u-image>
							<u-image v-else-if="index ===1" style="margin: 0 auto;" src="/static/img/loveforest/number_two.png" width="40" height="40" mode="aspectFit"></u-image>
							<u-image v-else-if="index ===2" style="margin: 0 auto;" src="/static/img/loveforest/number_three.png" width="40" height="40" mode="aspectFit"></u-image>
							<span v-else>{{index+1}}</span>
						</u-col>
						<u-col span="5">
							<view class="u-li
							ne-1">
								<span class="name u-p-r-10">{{item.userName}}</span>
								<span class="dep">{{item.deptName}}</span>
							</view>
							<view class="des u-line-1">获得了{{item.certificateNum}}个成就证书</view>
						</u-col>
						<u-col span="5" class="u-line-1">
							<view class="u-line-1">
								<view style="float:right;line-height:40px;margin-right:6px;" class="u-font-15 u-line-1 u-text-right">
									
									<span>{{item.totalGainEnergy != null ? item.totalGainEnergy : item.contributeEnergy}}g</span>
									
								</view>
							</view>
						</u-col>
					</u-row>
					
					<view class="rf-no-data" v-if="resultList.length == 0">
						暂无数据
					</view>
					<view class="rf-upload-tip" v-if="pageIndex < pageTotal && pageTotal > 0">
						正在加载数据...
					</view>
					<view class="rf-upload-tip" v-else-if="pageTotal > 0">
						无更多数据
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				timeList: [
					{name: '本月',value: 4},
					{name: '今年',value: 2},
					{name: '去年',value: 1},
					{name: '全部',value: 3},
				],
				energyList: [
					{name: '总能量',value: "A"},
					{name: '贡献能量',value: "E"},
				],
				energyIndex: 0,
				time: "",
				timeIndex: 0,
				timeShow: false,
				timeParams: {
					year: true,
					month: true,
					day: true
				},
				hideBorder: false,
				titleTime: "本月",
				timeValue: 4,
				energyName: "总能量",
				pageIndex: 1,
				pageTotal: 0,
				resultList: []
			}
		},
		onShow(){
			this.loadData()
		},
		methods: {
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.loadData()
			},
			setType (v,i,type) {
				switch (type) {
					case "timeType":
					console.log(v)
					this.timeIndex = i
					this.titleTime = v.name
					this.time = ""
					this.timeValue =  v.value
					console.log(i)
					break;
					case "energyType":
					this.energyIndex = i
					this.energyName = this.energyList[i].name
					break;
					default:;
				}
			},
			confirmTime (e) {
				this.time = e.year +"-"+ e.month +"-"+ e.day
				this.timeIndex = null
				this.titleTime = this.time
			},
			showTime () {
				this.timeShow = true
			},
			reachBottom () {
				if (this.pageIndex < this.pageTotal) {
					this.pageIndex += 1
					this.loadData()
				}
			},
			loadData() {
				let params = {currentPage:this.pageIndex,pageSize: 10,type:this.timeValue,beginTime:this.time,endTime:this.time, energyType:this.energyIndex+1}
				if(this.time) {
					params.type = 6
				}
				this.$u.api.personalInfo(params).then(res => {
					let _total = res.pagination.total % 10
					if (_total == 0) {
						_total = parseInt(res.pagination.total / 10)
					} else {
						_total = parseInt(res.pagination.total / 10) + 1
					}
					if (this.pageIndex == 1) {
						this.resultList = res.list || []
					} else {
						this.resultList.push(...res.list)
					}
					this.pageTotal = _total
				}).catch(res => {
					this.$u.toast(res.msg)
				})
			}
		}
	}
</script>
<style scoped lang="scss">
	page {
		background:#fff;
	}
	.content {
		.row{
			padding: 16px 16px 16px 6px;
			border-top: 1px solid #eee;
			position: relative;
			//top:-2px;
			.name {
				color:#333333;
				font-size: 30rpx;
				font-weight: bold;
			}
			.dep {
				font-size: 24rpx;
				color:#333333;
			}
			.des {
				color: #999999;
				font-size: 24rpx;
				margin-top:4px;
			}
		}
		// .hideBorder:nth-child(1) {
		// 	border-top:none;
		// }
		
	}
	.rf-no-data {
		margin-top: 30px;
		padding-bottom: 20px;
		text-align: center;
		color: #cccccc;
	}
	.rf-upload-tip {
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		color: #cccccc;
	}
	/deep/ .u-drawer-member {
		.custom-style {
			width: 147rpx!important;
			background: #fff!important;
			height: 64rpx!important;
			float:left!important;
			margin:0 14rpx 20rpx 0!important;
			border: 1px solid #ccc!important;
			font-size: 24rpx!important;
			color:#999999!important;
			border-radius: 30px;
		}
		.activeBtn {
			background: #488EF5!important;
			color: #fff!important;
			border: 0!important;
		}
	}
</style>